﻿<!DOCTYPE html>
<html>
  <head>
    <title>The Eight</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/owl.carousel.css">
    <link rel="stylesheet" href="css/jquery.fancybox.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/indent.css">
    <link rel="stylesheet" href="fonts/fi/flaticon.css">
    <link rel="stylesheet" type="text/css" href="tuner/css/colorpicker.css">
    <link rel="stylesheet" type="text/css" href="tuner/css/styles.css">
  </head>
  <body>
    <!-- header page-->
    <header>
      <!-- site top panel-->
      <!-- site top panel-->
      <div class="site-top-panel">
        <div class="container">
          <div class="row">
            <div class="col-sm-6">
              <!-- lang select wrapper-->
              <div class="lang-wrap"><i class="icon-lang flaticon-earth-globe21"></i>Change your language
                <select name="billing_lang" class="lang-change">
                  <option value="">English</option>
                  <option value="AX">Åland</option>
                  <option value="AF">Afghanistan</option>
                  <option value="AL">Albania</option>
                  <option value="DZ">Algeria</option>
                  <option value="AD">Andorra</option>
                  <option value="AO">Angola</option>
                  <option value="AI">Anguilla</option>
                </select>
              </div>
              <!-- ! lang select wrapper-->
            </div>
            <div class="col-sm-6 text-right">
              <!-- social wrapper-->
              <div class="social-wrap"><a href="#" class="cws-social flaticon-facebook55"></a><a href="#" class="cws-social flaticon-twitter1"></a><a href="#" class="cws-social fa fa-google-plus"></a><a href="#" class="cws-social flaticon-social-network106"></a><a href="#" class="cws-social flaticon-pinterest3"></a></div>
              <!-- ! social wrapper-->
            </div>
          </div>
        </div>
      </div>
      <!-- ! site top panel-->
      <!-- ! site top panel-->
      <!-- Navigation panel-->
      <nav class="main-nav js-stick">
        <div class="full-wrapper relative clearfix container">
          <!-- Logo ( * your text or image into link tag *)-->
          <div class="nav-logo-wrap local-scroll"><a href="index.html" class="logo"><img src="img/the8-logo.png" data-at2x="img/the8-logo@2x.png" alt><img src="img/the8-logo-sticky.png" data-at2x="img/the8-logo-sticky@2x.png" alt class="sticky-logo"></a></div>
          <!-- Main Menu-->
          <div class="inner-nav desktop-nav">
            <ul class="clearlist">
              <!-- Item With Sub-->
              <li><a href="index.html" class="mn-has-sub">Home <i class="fa fa-angle-down button_open"></i></a>
                <ul class="mn-sub">
                  <li><a href="index.html">Standart Slider</a></li>
                  <li><a href="index-slider.html">Full-Screen Slider</a></li>
                  <li><a href="index-video.html">Video Background</a></li>
                </ul>
              </li>
              <!-- End Item With Sub-->
              <!-- Item With Sub-->
              <li><a href="page-about-us.html" class="mn-has-sub active">Pages <i class="fa fa-angle-down button_open"></i></a>
                <!-- Sub-->
                <ul class="mn-sub">
                  <li class="active"><a href="page-about-us.html">About Us</a></li>
                  <li><a href="page-services.html">Services</a></li>
                  <li><a href="page-procces.html">Our Procces</a></li>
                  <li><a href="page-our-team.html">Our Team</a></li>
                  <li><a href="page-profile.html">Profile</a></li>
                  <li><a href="page-components.html">Components</a></li>
                </ul>
                <!-- End Sub-->
              </li>
              <!-- End Item With Sub-->
              <!-- Item With Sub-->
              <li><a href="portfolio-3-col.html" class="mn-has-sub">Portfolio <i class="fa fa-angle-down button_open"></i></a>
                <!-- Sub-->
                <ul class="mn-sub">
                  <li><a href="portfolio-3-col.html">Three Columns</a></li>
                  <li><a href="portfolio-4-col.html">Four Columns</a></li>
                  <li><a href="portfolio-with-sidebar.html">With Sidebar</a></li>
                  <li><a href="portfolio-gallery.html">Gallery</a></li>
                  <li><a href="page-portfolio-single.html">Portfolio Single</a></li>
                </ul>
                <!-- End Sub-->
              </li>
              <!-- End Item With Sub-->
              <!-- Item With Sub-->
              <li><a href="blog-sidebar-right.html" class="mn-has-sub">Blog <i class="fa fa-angle-down button_open"></i></a>
                <!-- Sub-->
                <ul class="mn-sub">
                  <li><a href="blog-2-col.html" class="mn-has-sub">Columns<i class="fa fa-angle-right pull-right button_open"></i></a>
                    <ul class="mn-sub to-left">
                      <li><a href="blog-2-col.html">Two Columns</a></li>
                      <li><a href="blog-2-col-sidebar.html">Two Columns + Sidebar</a></li>
                      <li><a href="blog-3-col.html">Three Columns</a></li>
                    </ul>
                  </li>
                  <li><a href="blog-sidebar-right.html">Blog Right Sidebar</a></li>
                  <li><a href="blog-medium-img.html">Medium Images</a></li>
                  <li><a href="blog-small-img.html">Small Images</a></li>
                  <li><a href="blog-single.html">Blog Single</a></li>
                </ul>
                <!-- End Sub-->
              </li>
              <!-- End Item With Sub-->
              <!-- Item With Sub-->
              <li><a href="shop-grid.html" class="mn-has-sub">Shop <i class="fa fa-angle-down button_open"></i></a>
                <!-- Sub-->
                <ul class="mn-sub">
                  <li><a href="shop-grid.html">Shop Grid</a></li>
                  <li><a href="shop-cart.html">Shop Cart</a></li>
                  <li><a href="shop-checkout.html">Shop Checkout</a></li>
                  <li><a href="shop-single.html">Shop Single Product</a></li>
                </ul>
                <!-- End Sub-->
              </li>
              <!-- End Item With Sub-->
              <!-- Item-->
              <li><a href="page-contact.html">Contact</a></li>
              <!-- End Item-->
              <!-- Cart-->
              <li class="menu-shop-card"><a href="#" class="mn-has-sub"><i class="flaticon-shopping-carts6 button_open"><span>2</span></i></a>
                <ul class="mn-sub right">
                  <li>
                    <aside class="widget-top-sellers shop-cart-menu">
                      <p>You have 
                        <span2 class="tx-color-2">item(s)</span2> in your shopping bag
                      </p>
                      <!-- item recent post-->
                      <div class="item-top-sellers clearfix"><img src="pic/shop/70x70/6.jpg" data-at2x="pic/shop/70x70/6@2x.jpg" alt>
                        <h3 class="title"><a href="shop-single.html">Phasellus accumsan cur</a></h3>
                        <div class="price">1 x $55.00</div>
                      </div>
                      <!-- ! item recent post-->
                      <!-- item recent post-->
                      <div class="item-top-sellers clearfix"><img src="pic/shop/70x70/1.jpg" data-at2x="pic/shop/70x70/1@2x.jpg" alt>
                        <h3 class="title"><a href="shop-single.html">Aenean posuere tortor</a></h3>
                        <div class="price">3 x $120.00</div>
                      </div>
                      <!-- ! item recent post-->
                      <hr class="mt-10 mb-10">
                      <div class="sub-total clearfix">Sub Total: <span>$2400</span></div>
                      <hr class="mt-10 mb-10">
                      <div class="row">
                        <div class="col-xs-6"><a href="shop-cart.html" class="cws-button full-width">View Cart</a></div>
                        <div class="col-xs-6"><a href="shop-checkout.html" class="cws-button full-width">Checkout</a></div>
                      </div>
                    </aside>
                  </li>
                </ul>
              </li>
              <!-- End Cart-->
              <!-- Search-->
              <li class="search"><a href="#" class="mn-has-sub"><i class="flaticon-magnifying-glass34 search-icon"></i></a>
                <ul class="search-sub">
                  <li>
                    <div class="container">
                      <div class="mn-wrap">
                        <form method="post" class="form">
                          <div class="search-wrap">
                            <input type="text" placeholder="Search . . ." class="form-control search-field">
                          </div>
                        </form>
                      </div>
                      <div class="close-button flaticon-cancel30"></div>
                    </div>
                  </li>
                </ul>
              </li>
              <!-- End Search-->
            </ul>
          </div>
          <!-- End Main Menu-->
        </div>
      </nav>
      <!-- End Navigation panel-->
      <!-- breadcrumbs start-->
      <section class="breadcrumbs">
        <div class="container">
          <div class="row">
            <div class="col-sm-6"> 
              <h1>About Us</h1>
            </div>
            <div class="col-sm-6 text-right breadcrumbs-item"><a href="index.html">home</a><i class="fa fa-angle-right"></i><a href="page-components.html">Pages</a><i class="fa fa-angle-right"></i><a href="#">About Us</a></div>
          </div>
        </div>
      </section>
      <!-- ! breadcrumbs end-->
    </header>
    <!-- ! header page-->
    <!-- page section about-->
    <section class="page-section">
      <div class="container">
        <div class="row">
          <div class="col-md-5 col-sm-6 mb-sm-50">
            <!-- section title-->
            <h2 class="title-section mt-0 mb-0">About Our <span>Product</span></h2>
            <!-- ! section title-->
            <div class="divider gray left mt-20 mb-25"></div>
            <p class="mb-20">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commo do ligula eg et dolor. Aenean massa.</p>
            <!-- list-->
            <ul class="mb-25">
              <li>Etiam lobortis nulla mi, ac lacinia mauris </li>
              <li>Donec tempor erat vel scelerisque posue</li>
              <li>Nam elementum elit eget tellus faucibus</li>
              <li>Aliquam turpis nibh, dictum eu consequat</li>
            </ul><a href="#" class="cws-button">View Project</a><a href="#" class="cws-button">Buy Theme</a>
          </div>
          <div class="col-md-7 col-sm-6"><img src="pic/mock-up_lean.png" data-at2x="pic/mock-up_lean@2x.png" alt></div>
        </div>
      </div>
      <!-- list-->
    </section>
    <!-- ! page section about-->
    <!-- section parallax counter-->
    <section class="page-section cws_prlx_section pt-70 pb-70 border-t border-b"><img src="pic/parallax-map.jpg" alt class="cws_prlx_layer">
      <div class="container">
        <div class="row cws-multi-col">
          <div class="col-md-3 col-xs-6 mb-md-50">
            <!-- counter block-->
            <div class="counter-block border-none white-t"><i class="counter-icon flaticon-social-network156"></i>
              <div data-count="4350" class="counter">0</div>
              <div class="count-divider"></div>
              <div class="counter-name text-uppercase">User Online</div>
            </div>
            <!-- ! counter block-->
          </div>
          <div class="col-md-3 col-xs-6 mb-md-50">
            <!-- counter block-->
            <div class="counter-block border-none white-t"><i class="counter-icon flaticon-diamond7"></i>
              <div data-count="5600" class="counter">0</div>
              <div class="count-divider"></div>
              <div class="counter-name text-uppercase">Prizes Win</div>
            </div>
            <!-- counter block-->
          </div>
          <div class="col-md-3 col-xs-6">
            <!-- counter block-->
            <div class="counter-block border-none white-t"><i class="counter-icon flaticon-hearts49"></i>
              <div data-count="7200" class="counter">0</div>
              <div class="count-divider"></div>
              <div class="counter-name text-uppercase">Happy Customers</div>
            </div>
            <!-- ! counter block-->
          </div>
          <div class="col-md-3 col-xs-6">
            <!-- counter block-->
            <div class="counter-block border-none white-t"><i class="counter-icon flaticon-portfolio2"></i>
              <div data-count="8190" class="counter">0</div>
              <div class="count-divider"></div>
              <div class="counter-name text-uppercase">Awesome Projects</div>
            </div>
            <!-- ! counter block-->
          </div>
        </div>
      </div>
    </section>
    <!-- ! section parallax counter-->
    <!-- section-->
    <section class="page-section">
      <div class="container">
        <h2 class="title-section mb-0 mt-0 text-center">What We Do</h2>
        <div class="divider gray mb-20 mt-25"></div>
        <p class="text-center mb-50">Curabitur at lacus ac velit ornare lobortis. Curabitur a felis in nunc fringilla tristique. Morbi mattis ullamcorper velit. Phasellus gravida semper nisi. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam.</p>
        <div class="row">
          <div class="col-md-6 mb-md-50">
            <!-- skill bar item-->
            <div class="skill-bar st-color-2">
              <div class="name">Branding<span class="skill-bar-perc"></span></div>
              <div class="bar"><span data-value="60" class="cp-bg-color skill-bar-progress"></span></div>
            </div>
            <!-- ! skill bar item-->
            <!-- skill bar item-->
            <div class="skill-bar st-color-4">
              <div class="name">Development<span class="skill-bar-perc"></span></div>
              <div class="bar"><span data-value="70" class="cp-bg-color skill-bar-progress"></span></div>
            </div>
            <!-- ! skill bar item-->
            <!-- skill bar item-->
            <div class="skill-bar">
              <div class="name">Design<span class="skill-bar-perc"></span></div>
              <div class="bar"><span data-value="80" class="cp-bg-color skill-bar-progress"></span></div>
            </div>
            <!-- ! skill bar item-->
            <!-- skill bar item-->
            <div class="skill-bar st-color-3">
              <div class="name">Support<span class="skill-bar-perc"></span></div>
              <div class="bar"><span data-value="90" class="cp-bg-color skill-bar-progress"></span></div>
            </div>
            <!-- ! skill bar item-->
          </div>
          <div class="col-md-6">
            <!-- accordion-->
            <div class="accordion mt-20">
              <div class="content-title"> <span class="active"><i class="accordion-icon"></i>Estibulum ante ipsum primis in faucibus orci luctus et.</span></div>
              <div class="content">Cras posuere vel ipsum ac varius. Nam hendrerit odio eget diam venenatis, in tempus ante blandit. Aenean accumsan tellus leo.</div>
              <div class="content-title"> <span><i class="accordion-icon"></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></div>
              <div class="content">Cras posuere vel ipsum ac varius. Nam hendrerit odio eget diam venenatis, in tempus ante blandit. Aenean accumsan tellus leo.</div>
              <div class="content-title"> <span><i class="accordion-icon"></i>Sed ac nibh id lectus tincidunt vulputate ullamcorper in dui.</span></div>
              <div class="content">Cras posuere vel ipsum ac varius. Nam hendrerit odio eget diam venenatis, in tempus ante blandit. Aenean accumsan tellus leo.</div>
            </div>
            <!-- ! accordion-->
          </div>
        </div>
      </div>
    </section>
    <!-- ! section-->
    <!-- section parallax-->
    <section class="page-section cws_prlx_section pt-180 pb-180"><img src="pic/1920x1080-img-1.jpg" alt class="cws_prlx_layer">
      <div class="overlay"></div>
      <div class="container">
        <div class="row">
          <div class="col-md-10 col-md-offset-1">
            <h2 class="title-section mb0 mt-0 text-center text-white">Best Theme Ever! Discover <span>The Eight</span></h2>
            <div class="divider mb-20 mt-25 white"></div>
            <p class="text-center text-white mb-30">Donec convallis a velit nec ultricies. Vestibulum elementum neque vitae orci vehicula, ac varius mi fringilla. Nullam molestie lectus vitae lorem aliquet, quis rutrum quam blandit. Nunc arcu mi, blandit ac nisl ut, lacinia dignissim massa.</p>
            <div class="text-center"><a href="#" class="cws-button white">Check It</a></div>
          </div>
        </div>
      </div>
    </section>
    <!-- ! section parallax-->
    <!-- section team-->
    <section class="page-section">
      <div class="container">
        <h2 class="title-section mb-0 mt-0 text-center">Meet Our <span>Team</span></h2>
        <div class="divider mb-20 mt-25 gray"></div>
        <p class="text-center mb-50">Curabitur at lacus ac velit ornare lobortis. Curabitur a felis in nunc fringilla tristique. Morbi mattis ullamcorper velit. Phasellus gravida semper nisi. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam.</p>
        <div class="row cws-multi-col">
          <div class="col-md-3 col-sm-6 mb-md-30">
            <!-- profile item-->
            <div class="profile-item">
              <div class="pic"><img src="pic/team/3.jpg" data-at2x="pic/team/3@2x.jpg" alt>
                <div class="hover-effect"></div>
                <div class="links"><a href="pic/team/3@2x.jpg" class="link-icon flaticon-magnifying-glass84 fancy"></a><a href="page-profile.html" class="link-icon flaticon-return13"></a></div>
              </div>
              <div class="profile-info">
                <h3 class="profile-name">Joshua Doe<span class="special"> / Developer</span></h3>
                <div class="divider"></div>
                <p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec.</p>
                <div class="social-link"><a href="#" class="cws-social flaticon-facebook55"></a><a href="#" class="cws-social flaticon-twitter1"></a><a href="#" class="cws-social fa fa-google-plus"></a><a href="#" class="cws-social flaticon-social-network106"></a><a href="#" class="cws-social flaticon-pinterest3"></a></div>
              </div>
            </div>
            <!-- ! profile item-->
          </div>
          <div class="col-md-3 col-sm-6 mb-md-30">
            <!-- profile item-->
            <div class="profile-item">
              <div class="pic"><img src="pic/team/1.jpg" data-at2x="pic/team/1@2x.jpg" alt>
                <div class="hover-effect"></div>
                <div class="links"><a href="pic/team/1@2x.jpg" class="link-icon flaticon-magnifying-glass84 fancy"></a><a href="page-profile.html" class="link-icon flaticon-return13"></a></div>
              </div>
              <div class="profile-info">
                <h3 class="profile-name">Scott Doe<span class="special"> / Web Designer</span></h3>
                <div class="divider color-4"></div>
                <p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec.</p>
                <div class="social-link"><a href="#" class="cws-social flaticon-facebook55"></a><a href="#" class="cws-social flaticon-twitter1"></a><a href="#" class="cws-social fa fa-google-plus"></a><a href="#" class="cws-social flaticon-social-network106"></a><a href="#" class="cws-social flaticon-pinterest3"></a></div>
              </div>
            </div>
            <!-- ! profile item-->
          </div>
          <div class="col-md-3 col-sm-6 mb-sm-30">
            <!-- profile item-->
            <div class="profile-item">
              <div class="pic"><img src="pic/team/2.jpg" data-at2x="pic/team/2@2x.jpg" alt>
                <div class="hover-effect"></div>
                <div class="links"><a href="pic/team/2@2x.jpg" class="link-icon flaticon-magnifying-glass84 fancy"></a><a href="page-profile.html" class="link-icon flaticon-return13"></a></div>
              </div>
              <div class="profile-info">
                <h3 class="profile-name">Mary Doe<span class="special"> / Graphic Designer</span></h3>
                <div class="divider color-2"></div>
                <p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec.</p>
                <div class="social-link"><a href="#" class="cws-social flaticon-facebook55"></a><a href="#" class="cws-social flaticon-twitter1"></a><a href="#" class="cws-social fa fa-google-plus"></a><a href="#" class="cws-social flaticon-social-network106"></a><a href="#" class="cws-social flaticon-pinterest3"></a></div>
              </div>
            </div>
            <!-- ! profile item-->
          </div>
          <div class="col-md-3 col-sm-6">
            <!-- profile item-->
            <div class="profile-item">
              <div class="pic"><img src="pic/team/4.jpg" data-at2x="pic/team/4@2x.jpg" alt>
                <div class="hover-effect"></div>
                <div class="links"><a href="pic/team/4@2x.jpg" class="link-icon flaticon-magnifying-glass84 fancy"></a><a href="page-profile.html" class="link-icon flaticon-return13"></a></div>
              </div>
              <div class="profile-info">
                <h3 class="profile-name">Peter Doe<span class="special"> / Ceo</span></h3>
                <div class="divider color-3"></div>
                <p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec.</p>
                <div class="social-link"><a href="#" class="cws-social flaticon-facebook55"></a><a href="#" class="cws-social flaticon-twitter1"></a><a href="#" class="cws-social fa fa-google-plus"></a><a href="#" class="cws-social flaticon-social-network106"></a><a href="#" class="cws-social flaticon-pinterest3"></a></div>
              </div>
            </div>
            <!-- ! profile item-->
          </div>
        </div>
      </div>
    </section>
    <!-- ! section team-->
    <!-- our partners-->
    <section class="page-section bg-gray bt-gray">
      <div class="container">
        <div class="row">
          <div class="col-md-10 col-md-offset-1">
            <h2 class="title-section mb0 mt-0 text-center">Our Partners</h2>
            <div class="divider mb-20 mt-25"></div>
            <p class="text-center mb-0">Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui.</p>
          </div>
        </div>
        <div class="row mt-50">
          <!-- partner item-->
          <div class="col-md-2 col-xs-4 partner-item mb-md-10"><img src="img/logos/Clinico.png" alt class="filter-grayscale"></div>
          <!-- ! partner item-->
          <!-- partner item-->
          <div class="col-md-2 col-xs-4 partner-item mb-md-10"><img src="img/logos/HappyKids.png" alt class="filter-grayscale"></div>
          <!-- ! partner item-->
          <!-- partner item-->
          <div class="col-md-2 col-xs-4 partner-item mb-md-10"><img src="img/logos/olivia.png" alt class="filter-grayscale"></div>
          <!-- ! partner item-->
          <!-- partner item-->
          <div class="col-md-2 col-xs-4 partner-item"><img src="img/logos/PressView.png" alt class="filter-grayscale"></div>
          <!-- ! partner item-->
          <!-- partner item-->
          <div class="col-md-2 col-xs-4 partner-item"><img src="img/logos/Proway.png" alt class="filter-grayscale"></div>
          <!-- ! partner item-->
          <!-- partner item-->
          <div class="col-md-2 col-xs-4 partner-item"><img src="img/logos/Unilearn.png" alt class="filter-grayscale"></div>
          <!-- ! partner item-->
          <!-- partner item-->
        </div>
      </div>
    </section>
    <!-- ! our partners-->
    <!-- footer-->
    <footer class="footer">
      <div class="container">
        <div class="row cws-multi-col">
          <div class="col-md-3 col-sm-6 mb-md-50">
            <div class="widget-footer text">
              <h3>About</h3>
              <div class="divider"></div>
              <p>Ut tincidunt nisl sapien, eget gravida quama vestibulum vitae. Ut ultrices purus quis tinci dunt rutrum proin commodo ipsum.</p>
              <p>Vestibulum vitae nisl quis elit tristique egesi tas eget sed nisi. Etiam mi sapien, luctus ac tempor quis, varius eu neque.</p>
            </div>
          </div>
          <div class="col-md-3 col-sm-6 mb-md-50">
            <div class="widget-footer">
              <h3>Recent posts</h3>
              <div class="divider"></div>
              <div class="recent-item clearfix"><a href="blog-single.html"><img src="pic/footer/7.jpg" data-at2x="pic/footer/7@2x.jpg" alt></a>
                <h4 class="recent-title"><a href="blog-single.html">Morbi Iaculis</a></h4>
                <p>Ut tincidunt nisl s apien, eget gravida sed nisi reet ... <a href="#">more</a></p>
              </div>
              <div class="recent-item clearfix"><a href="blog-single.html"><img src="pic/footer/8.jpg" data-at2x="pic/footer/8@2x.jpg" alt></a>
                <h4 class="recent-title"><a href="blog-single.html">Praesent sagittis</a></h4>
                <p>Ut tincidunt nisl s apien, eget gravida sed nisi reet ... <a href="#">more</a></p>
              </div>
            </div>
          </div>
          <div class="col-md-3 col-sm-6 mb-sm-50">
            <div class="widget-footer">
              <h3>Gallery</h3>
              <div class="divider"></div>
              <div class="gallery clearfix">
                <div class="gallery-item">
                  <div class="pic"><img src="pic/footer/1.jpg" alt data-at2x="pic/footer/1@2x.jpg">
                    <div class="hover-effect alt">
                      <div class="links"><a href="pic/footer/1@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a></div>
                    </div>
                  </div>
                </div>
                <div class="gallery-item">
                  <div class="pic"><img src="pic/footer/2.jpg" alt data-at2x="pic/footer/2@2x.jpg">
                    <div class="hover-effect alt">
                      <div class="links"><a href="pic/footer/2@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a></div>
                    </div>
                  </div>
                </div>
                <div class="gallery-item">
                  <div class="pic"><img src="pic/footer/3.jpg" alt data-at2x="pic/footer/3@2x.jpg">
                    <div class="hover-effect alt">
                      <div class="links"><a href="pic/footer/3@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a></div>
                    </div>
                  </div>
                </div>
                <div class="gallery-item">
                  <div class="pic"><img src="pic/footer/4.jpg" alt data-at2x="pic/footer/4@2x.jpg">
                    <div class="hover-effect alt">
                      <div class="links"><a href="pic/footer/4@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a></div>
                    </div>
                  </div>
                </div>
                <div class="gallery-item">
                  <div class="pic"><img src="pic/footer/5.jpg" alt data-at2x="pic/footer/5@2x.jpg">
                    <div class="hover-effect alt">
                      <div class="links"><a href="pic/footer/5@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a></div>
                    </div>
                  </div>
                </div>
                <div class="gallery-item">
                  <div class="pic"><img src="pic/footer/6.jpg" alt data-at2x="pic/footer/6@2x.jpg">
                    <div class="hover-effect alt">
                      <div class="links"><a href="pic/footer/6@2x.jpg" class="link-icon alt flaticon-magnifying-glass84 fancy"></a></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-3 col-sm-6">
            <div class="widget-footer">
              <h3>Contact us</h3>
              <div class="divider"></div>
              <address>
                <p>You can contact us via <a href="mailto:the8@gmail.com">the8@gmail.com</a></p><strong>Our address</strong>
                <p>250 Biscayne Blvd. (North) 11st Floor New World Tower Miami, Florida 33148</p><strong>Our phone</strong><br><a href="tel:180012345678">1-800-123-45678</a>
              </address>
            </div>
          </div>
        </div>
      </div>
      <div class="copyright">
        <div class="container">
          <div class="row">
            <div class="col-sm-8">
              <p>Copyrights ©2016: The8 - Premium Multipurpose WordPress Theme</p>
            </div>
            <div class="col-sm-4 text-right"><a href="#" class="cws-social flaticon-facebook55"></a><a href="#" class="cws-social flaticon-twitter1"></a><a href="#" class="cws-social fa fa-google-plus"></a><a href="#" class="cws-social flaticon-social-network106"></a><a href="#" class="cws-social flaticon-pinterest3"></a></div>
          </div>
        </div>
      </div>
    </footer>
    <div id="scroll-top"><i class="fa fa-angle-up"></i></div>
    <!-- ! footer-->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/owl.carousel.js"></script>
    <script type="text/javascript" src="js/jquery.sticky.js"></script>
    <script type="text/javascript" src="js/cws_parallax.js"></script>
    <script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
    <script type="text/javascript" src="js/jquery.fancybox-media.js"></script>
    <script type="text/javascript" src="js/jquery.isotope.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="js/jquery.form.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <!--<script type="text/javascript" src="js/jquery.tweet.js"></script>-->
    <script type="text/javascript" src="tuner/js/colorpicker.js"></script>
    <script type="text/javascript" src="tuner/js/scripts.js"></script>
    <script type="text/javascript" src="js/retina.min.js"></script>
  </body>
</html>